<template>
  <div class="contractInfo">
    <div class="part">
      <title-name title="基本信息" icon="i-carbon-bookmark-filled"></title-name>
      <div class="my-30px">
        <el-descriptions :column="2" border>
          <template v-for="item in renderInfo" :key="item.key">
            <el-descriptions-item
              v-if="item.key === 'accFileList'"
              :label="item.name"
              label-class-name="w-4/24"
              class-name="w-8/24"
              label-align="right"
            >
              <div v-for="f in item.value" :key="f">
                <a :href="f.url" style="color: #409eff">{{ f.origFileName }}</a>
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              v-else-if="item.key === 'ordOrderContractDto'"
              :label="item.name"
              label-class-name="w-4/24"
              class-name="w-8/24"
              label-align="right"
            >
              <div v-for="f in item.value" :key="f.ordId">
                <span
                  @click="
                    goToPage(
                      { salesOrderId: f.ordId },
                      '/sales/indent/salesOrderDetails'
                    )
                  "
                  class="routerLink"
                  >{{ f.ordName }}</span
                >
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              v-else-if="item.key === 'projectName'"
              :label="item.name"
              label-class-name="w-4/24"
              class-name="w-8/24"
              label-align="right"
            >
              <div>
                <span
                  @click="
                    goToPage(
                      { id: projectId },
                      '/sales/projectManage/projectDetails'
                    )
                  "
                  class="routerLink"
                  >{{ item.value }}</span
                >
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              :label="item.name"
              label-class-name="w-4/24"
              class-name="w-8/24"
              v-else-if="item.key !== 'fileNames'"
              label-align="right"
            >
              {{ item.value }}
            </el-descriptions-item>
            <el-descriptions-item
              v-else
              :label="item.name"
              label-class-name="w-4/24"
              class-name="w-8/24"
              label-align="right"
            >
              <div v-for="f in item.value" :key="f">
                <a :href="f.url" style="color: #409eff">{{ f.origFileName }}</a>
              </div>
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </div>
    </div>

    <div class="part" v-if="epiboly">
      <title-name
        title="人力外包情况"
        icon="i-carbon-bookmark-filled"
      ></title-name>
      <div class="flex justify-center mt-30px">
        <el-table :data="epibolyData" border>
          <el-table-column prop="workName" label="工种" align="center" />
          <el-table-column prop="peopleNum" label="人数" align="center" />
        </el-table>
      </div>
    </div>
    <div class="part">
      <title-name
        title="付款方式和条款"
        icon="i-carbon-bookmark-filled"
      ></title-name>
      <div class="flex justify-center mt-30px">
        <el-table :data="tableData" border>
          <el-table-column
            prop="periodsNum"
            label="期次"
            width="80"
            align="center"
          />
          <el-table-column prop="stage" label="阶段" align="center" />
          <el-table-column prop="conditions" label="条件" align="center" />
          <el-table-column
            prop="planAccepDate"
            label="付款日期"
            align="center"
          />
          <el-table-column
            prop="planAccepRatio"
            label="付款金额比例(%)"
            align="center"
          />
          <el-table-column
            prop="planReturnSum"
            label="付款金额(元)"
            align="center"
          />
          <el-table-column prop="remark" label="备注" align="center" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="BaseInfo">
const props = defineProps({
  epibolyData: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  epiboly: {
    type: Boolean,
    default: false
  },
  renderInfo: {
    type: Array,
    default: () => []
  },
  projectId: {
    type: String,
    default: ''
  }
})
const router = useRouter()
function goToPage(query, path) {
  router.push({
    path,
    query
  })
}
</script>

<style scoped>
.routerLink {
  color: #409eff;
  cursor: pointer;
}
</style>
